<template>
	<view>
		<u-form ref="formData" :model="formData" label-width="80px" style='margin: 10px 0 0 0;'>
			<u-row v-for="(item, index) in formList[0][formData.warningType]" :key="index">
				<u-col>
					<u-form-item :label="item.name + ':'" :prop="item.value" :label-width="item.width">
						<view>
							<view v-if="item.extend">
								<span v-if="formData.warningType == 1006 && item.index">{{
	                  formData["detailRule"][item.index][item.value]
	                }}</span>
								<span v-else>
									{{
	                    Object.keys(formData["detailRule"]).length == 0
	                    ? ""
	                    : formData["detailRule"][item.value]
	                  }}
								</span>
							</view>
							<span v-else-if="item.value !== 'vehCount'">{{
	                formData[item.value]
	              }}</span>
							<span v-else>{{ formData["detailRule"]["vehCount"] }}头{{
	                formData["detailRule"]["guaVehCount"]
	              }}挂</span>
							<!-- <el-input readonly v-model="formData[item.value]" size="medium" /> -->
						</view>
					</u-form-item>
				</u-col>
			</u-row>
		</u-form>
		<p v-if="mgntvehrunlogList.length==0" style='text-align: center;line-height: 60px;'>暂无运单信息</p>
		<view style="width: 80%;margin: 10px auto;height: 220px;overflow: auto;" v-else>
			<u-steps :current="stepsActive" direction="column">
				<u-steps-item v-for="(item, index) in mgntvehrunlogList" :key="index">
					<text slot="desc" v-if="item.logType == 0">
						<view style='color:#5881dc'>创建运单</view>
						{{ item.updateTime  }}
						<p>{{ item.creatorName }}完成了运单派发</p>
					</text>
					<text slot="desc" v-else-if="item.logType == 21">
						<view style='color:#5881dc'>{{ item.logType | logTypeFilter }}</view>
						{{ item.updateTime  }}
						<p>
							{{ item.recordPlace }}完成装货，货物重量：{{
					            item.logContent
					          }}吨
						</p>
					</text>
					<text slot="desc" v-else-if="item.logType == 20">
						<view style='color:#5881dc'>{{ item.logType | logTypeFilter }}</view>
						{{ item.updateTime  }}
						<p>运输中，货物总重量：{{ item.logContent }}吨</p>
					</text>
					<text slot="desc" v-else-if="item.logType == 22">
						<view style='color:#5881dc'>{{ item.logType | logTypeFilter }}</view>
						{{ item.updateTime  }}
						<p>地点：{{ item.recordPlace }}</p>
					</text>
					<text slot="desc" v-else-if="item.logType == 23">
						<view style='color:#5881dc'>{{ item.logType | logTypeFilter }}</view>
						{{ item.updateTime  }}
						<p>
							{{ item.creatorName }}进行了运输中检查，检查结果{{
			                    item.safetyResults == "0"
			                    ? "正常"
			                    : item.safetyResults == "1"
			                      ? "异常"
			                      : "正常"
			                  }}
						</p>
					</text>
					<text slot="desc" v-else-if="item.logType == 10">
						<view style='color:#5881dc'>{{ item.logType | logTypeFilter }}</view>
						{{ item.updateTime  }}
						<p>
							{{ item.creatorName }}进行了出车前检查，检查结果{{
			                    item.safetyResults == "0"
			                    ? "正常"
			                    : item.safetyResults == "1"
			                      ? "异常"
			                      : "正常"
			                  }}
						</p>
					</text>
					<text slot="desc" v-else-if="item.logType == 24">
						<view style='color:#5881dc'>{{ item.logType | logTypeFilter }}</view>
						{{ item.updateTime  }}
						<p>地点：{{ item.recordPlace }}</p>
					</text>
					<text slot="desc" v-else-if="item.logType == 26">
						<view style='color:#5881dc'>{{ item.logType | logTypeFilter }}</view>
						{{ item.updateTime  }}
						<p>
							{{ item.recordPlace }}完成了卸货，卸货重量：{{
			                    item.logContent
			                  }}吨
						</p>
					</text>
					<text slot="desc" v-else-if="item.logType == 27">
						<view style='color:#5881dc'>{{ item.logType | logTypeFilter }}</view>
						{{ item.updateTime  }}
					</text>
					<text slot="desc" v-else-if="item.logType == 30">
						<view style='color:#5881dc'>{{ item.logType | logTypeFilter }}</view>
						{{ item.updateTime  }}
						<p>
							{{ item.creatorName }}进行了回场检查，检查结果{{
			                    item.safetyResults == "0"
			                    ? "正常"
			                    : item.safetyResults == "1"
			                      ? "异常"
			                      : "正常"
			                  }}
						</p>
					</text>
				</u-steps-item>
			</u-steps>
		</view>
		<view class="webView">
			<!-- <web-view :src="viewUrl" ref="wbView" ></web-view> -->
			<mapModule :linePath='linePath'></mapModule>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mgntvehrunlogList,
		trackQueryByBill
	} from '@/common/api/req.js'
	import mapModule from './components/map.vue'

	export default {
		components: {
			mapModule
		},
		filters: {
			logTypeFilter(value) {
				switch (value) {
					case '10':
						return '出车前检查';
					case '20':
						return '运输中';
					case '21':
						return '装货完成';
					case '22':
						return '停车休息';
					case '23':
						return '运输中检查';
					case '24':
						return '临时停靠';
					case '25':
						return '换班休息';
					case '26':
						return '卸货完成';
					case '27':
						return '运单完成';
					case '30':
						return '回场检查';
					case '40':
						return '日常维护';
					case '50':
						return '车辆加油';
					case '60':
						return '故障事故';
					default:
						return '未知';
				}
			},
		},
		data() {
			return {
				formData: {
					detailRule: {
						vehCode: ""
					},
				},
				stepsActive: 1,
				mgntvehrunlogList: [],
				province: [],
				locationList: [],
				linePath: [],
				// viewUrl: "/hybrid/html/dynamic-warning/index.html",
				formList: [{
					1001: [{
							name: "预警信息",
							value: "warningInfo",
							row: 21,
						},
						{
							name: "企业名称",
							value: "ownerName",
							row: 10,
						},
						{
							name: "运单号",
							value: "billNo",
							row: 10,
						},
						{
							name: "经营有效期至",
							value: "expireLicenseDate",
							row: 10,
							width: "100px",
							extend: "detailRule",
						},
						{
							name: "企业车辆数",
							value: "vehCount",
							row: 10,
							width: "90px",
						},
					],
					1002: [{
							name: "预警信息",
							value: "warningInfo",
							row: 21,
						},
						{
							name: "车牌号码",
							value: "vehCode",
							row: 10,
							extend: "detailRule",
						},
						{
							name: "所属企业",
							value: "ownerName",
							row: 10,
						},
						{
							name: "道路运输证有效期止",
							value: "expireTransCertDate",
							row: 10,
							width: "150px",
							extend: "detailRule",
						},
						{
							name: "运单号",
							value: "billNo",
							row: 10,
						},
					],
					1003: [{
							name: "预警信息",
							value: "warningInfo",
							row: 21,
						},
						{
							name: "车牌号码",
							value: "vehCode",
							row: 10,
							extend: "detailRule",
						},
						{
							name: "所属企业",
							value: "ownerName",
							row: 10,
						},
						{
							name: "下次年审日期",
							value: "nextYearVerificationDate",
							row: 10,
							width: "100px",
							extend: "detailRule",
						},
						{
							name: "运单号",
							value: "billNo",
							row: 10,
						},
					],
					1004: [{
							name: "预警信息",
							value: "warningInfo",
							row: 21,
						},
						{
							name: "车牌号码",
							value: "vehCode",
							row: 10,
							extend: "detailRule",
						},
						{
							name: "所属企业",
							value: "ownerName",
							row: 10,
						},
						{
							name: "下次技术等级评定日期",
							value: "nextTechnicalEvalDate",
							row: 10,
							width: "160px",
							extend: "detailRule",
						},
						{
							name: "运单号",
							value: "billNo",
							row: 10,
						},
					],
					1005: [{
							name: "预警信息",
							value: "warningInfo",
							row: 21,
						},
						{
							name: "车牌号码",
							value: "vehCode",
							row: 10,
							extend: "detailRule",
						},
						{
							name: "所属企业",
							value: "ownerName",
							row: 10,
						},
						{
							name: "罐体检验有效期",
							value: "validDate",
							row: 10,
							width: "120px",
							extend: "detailRule",
						},
						{
							name: "运单号",
							value: "billNo",
							row: 10,
						},
					],
					1006: [{
							name: "预警信息",
							value: "warningInfo",
							row: 21,
						},
						{
							name: "所属企业",
							value: "ownerName",
							row: 10,
						},
						{
							name: "运单号",
							value: "billNo",
							row: 10,
						},
					],
					1007: [{
							name: "预警信息",
							value: "warningInfo",
							row: 21,
						},
						{
							name: "企业名称",
							value: "ownerName",
							row: 10,
						},
						{
							name: "运单号",
							value: "billNo",
							row: 10,
						},
						{
							name: "经营有效期至",
							value: "expireLicenseDate",
							row: 10,
							width: "100px",
							extend: "detailRule",
						},
						{
							name: "企业车辆数",
							value: "vehCount",
							row: 10,
							width: "90px",
						},
					],
					1008: [{
							name: "预警信息",
							value: "warningInfo",
							row: 21,
						},
						{
							name: "车牌号码",
							value: "vehNo",
							row: 10,
							extend: "detailRule",
						},
						{
							name: "所属企业",
							value: "ownerName",
							row: 10,
						},
						{
							name: "门架名称",
							value: "mjName",
							row: 10,
							extend: "detailRule",
						},
						{
							name: "门架通行时间",
							value: "transTime",
							row: 10,
							width: "110px",
							extend: "detailRule",
						},
						{
							name: "运单号",
							value: "billNo",
							row: 10,
						},
					],
				}, ],
			};
		},
		onLoad(option) {
			this.formData = JSON.parse(option.item);
			this.formData.detailRule = JSON.parse(this.formData.detailRule)
		},
		mounted() {
			for (let k in this.formData.detailRule) {
				if (this.formData.detailRule[k].driverName) {
					this.formList[0][1006].push({
						name: "驾驶员",
						value: "driverName",
						row: 10,
						width: "90px",
						extend: "detailRule",
						index: k,
					}, {
						name: "从业资格证有效期",
						value: "driverCertExpireDate",
						row: 10,
						width: "135px",
						extend: "detailRule",
						index: k,
					});
				} else {
					this.formList[0][1006].push({
						name: "押运员",
						value: "escortName",
						row: 10,
						width: "90px",
						extend: "detailRule",
						index: k,
					}, {
						name: "从业资格证有效期",
						value: "escortCertExpireDate",
						row: 10,
						width: "135px",
						extend: "detailRule",
						index: k,
					});
				}
			}

			this.search()
		},

		onReady() {},
		methods: {
			search() {
				let that = this
				if (this.formData.taskId) {
					mgntvehrunlogList({
						taskId: this.formData.taskId,
					}).then((res) => {
						this.mgntvehrunlogList = res.data.data.records;
						this.stepsActive = this.mgntvehrunlogList.length;
					});
					// 轨迹查询
					trackQueryByBill({
						taskId: this.formData.taskId,
					}).then((res) => {

						if (res.data.code == 200) {
							this.linePath = res.data.data
						} else {
							// 未获取到轨迹信息
							this.$refs.uToast.show({
								type: 'error',
								message: res.data.msg,
							})
						}

					})
				}

			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-form-item__body__left {
		padding: 0 0 0 20px;
	}

	::v-deep .u-form-item__body {
		padding: 6px 0;
	}

	.steps_item {
		border: 1px red solid;
		width: 100%;
		margin: 0 auto;
	}

	.webView {
		width: 90%;
		height: 350px;
		margin: 0 0 0 5%;
	}
</style>
